<template>
  <a-modal v-model:visible="visible" :title="title" unmount-on-close @before-ok="onOk">
    <a-form ref="formRef" :model="form" size="medium" auto-label-width>
      <a-form-item
        label="权限名称"
        field="name"
        :rules="[{ required: true, message: '请输入权限名称' }]"
        :validate-trigger="['change', 'input', 'blur', 'focus']"
      >
        <a-input placeholder="请输入权限名称" v-model="form.name" allow-clear></a-input>
      </a-form-item>
      <a-form-item
        label="显示名称"
        field="display_name"
        :rules="[{ required: true, message: '请输入显示名称' }]"
        :validate-trigger="['change', 'input', 'blur', 'focus']"
      >
        <a-input placeholder="请输入显示名称" v-model="form.display_name" allow-clear></a-input>
      </a-form-item>
      <a-form-item
        label="权限组"
        field="pg_id"
        :rules="[{ required: true, message: '请选择权限组' }]"
        :validate-trigger="['change']"
      >
        <a-select placeholder="请选择权限组" v-model="form.pg_id">
          <a-option v-for="item in allPermissionGroup" :value="item.id" :key="item.id" :label="item.name"></a-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="排序"
        field="sequence"
        :rules="[{ required: true, message: '请输入排序' }]"
        :validate-trigger="['change', 'input', 'blur', 'focus']"
      >
        <a-input-number :min="1" placeholder="请输入排序" v-model="form.sequence" allow-clear></a-input-number>
      </a-form-item>
      <a-form-item label="描述" field="description">
        <a-input placeholder="请输入描述" v-model="form.description" allow-clear></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { permissionAdd, permissionEdit, allPermissionGroupList } from '@/apis'
import { Message } from '@arco-design/web-vue'
const emit = defineEmits(['getTableData'])

const title = computed(() => (form.id ? '编辑权限' : '新增权限'))
const visible = ref(false)
const formRef = ref()
const allPermissionGroup = ref([])

const form = reactive({
  id: undefined,
  name: '',
  guard_name: 'admin',
  pg_id: undefined,
  display_name: '',
  sequence: 1,
  description: ''
})

// 获取所有权限组
const getAllPermissionGroupList = async () => {
  const res = await allPermissionGroupList()
  allPermissionGroup.value = res.data.data
}
getAllPermissionGroupList()

const addOrEdit = (deptItem) => {
  form.id = deptItem?.id || undefined
  form.name = deptItem?.name || ''
  form.display_name = deptItem?.display_name || ''
  form.pg_id = deptItem?.pg_id || undefined
  form.sequence = deptItem?.sequence || 1
  form.description = deptItem?.description || ''
  visible.value = true
}

const onOk = async () => {
  const validateResult = await formRef.value?.validate()
  if (validateResult) return false
  const api = form.id ? permissionEdit : permissionAdd
  await api(form)
  Message.success('操作成功')
  emit('getTableData')
  return true
}

defineExpose({ addOrEdit })
</script>
